<template>
  <div class="employees-detail-container">
    <div class="app-container">

      <el-card>
        <el-tabs>
          <el-tab-pane label="登录账号设置">
            <!-- 放置表单 -->
            <el-form ref="pwdForm" :model="pwdInfo" :rules="rules" label-width="120px" style="margin-left: 120px; margin-top:30px">
              <el-form-item label="姓名:" prop="username">
                <el-input v-model="pwdInfo.username" style="width:300px" />
              </el-form-item>
              <el-form-item label="密码:" prop="password">
                <el-input v-model="pwdInfo.password" style="width:300px" type="password" />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="handleUpdate">更新</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="个人详情">
            <el-tooltip class="tooltip-box" content="打印基本个人信息">
              <router-link :to="`/employees/print/${id}?type=personal`">
                <i class="el-icon-printer" />
              </router-link>
            </el-tooltip>
            <!-- 内容 -->
            <userMin />
          </el-tab-pane>
          <el-tab-pane label="岗位信息">
            <el-tooltip class="tooltip-box" content="打印基本岗位信息">
              <router-link :to="`/employees/print/${id}?type=job`">
                <i class="el-icon-printer" />
              </router-link>
            </el-tooltip>
            <!-- 内容 -->
            <JobInfo />
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </div>
  </div>
</template>
<script>
// 调用修改用户个人信息接口
import { getDetailInfo } from '@/api/user.js'
// 调用修改账号密码的接口
import { reqSaveUserDetailById } from '@/api/employees.js'
import { mapState } from 'vuex'
import userMin from '../../views/employees/components/UserInfo'
import JobInfo from '../../views/employees/components/JobInfo'
export default {
  name: 'Detail',
  components: {
    userMin,
    JobInfo
  },
  props: {
    // 获取动态路由(获取用户id)
    // eslint-disable-next-line vue/require-default-prop
    id: {
      type: String,
      require: true
    }
  },
  computed: {
    ...mapState('user', ['userInfo'])
  },
  // eslint-disable-next-line vue/order-in-components
  data () {
    return {
      // 用于重置密码的信息
      pwdInfo: {
        username: '',
        password: ''
      },
      // 用于表单验证
      rules: {
        username: [
          { required: true, message: '姓名不能为空', trigger: ['blur', 'change'] }
        ],
        password: [
          { required: true, message: '密码不可以为空', trigger: ['blur', 'change'] },
          { min: 6, max: 9, message: '密码必须是6-9位', trigger: ['blur', 'change'] }
        ]
      }
    }
  },
  created () {
    this.loadUserInfo()
  },
  methods: {
    // 获取用户信息
    async loadUserInfo () {
      const ret = await getDetailInfo(this.id)
      this.pwdInfo.username = ret.data.username
    },
    // 修改账号密码后上传服务器
    handleUpdate () {
      // 设置表单验证
      this.$refs.pwdForm.validate(async valid => {
        if (!valid) return
        // 调用接口更新
        const ret = await reqSaveUserDetailById({
          // 导入用户修改后的所有数据
          ...this.pwdInfo,
          id: this.id
        })
        // 进行判断 如果上传成功 提示用户 上传失败 提示用户
        if (ret.code === 10000) {
          // 上传成功 提示用户
          this.$message.success(ret.message)
        } else {
          // 上传失败 提示用户
          this.$message.error(ret.message)
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.employees-detail-container {
  .el-tab-pane {
    padding-top: 10px;
  }
  .tooltip-box {
    position: absolute;
    right: 30px;
    top: 10px;
    z-index: 999;
  }
}
</style>
